<template>
    <div>
        <main>
            <div class="search-page__main">
                <div class="search-title">
                    与
                    <span class="search__word">{{searchText}}</span> 相关的作品
                </div>
                <el-tabs v-model="tab">
                    <el-tab-pane name="work_date" label="最新上传">
                        <SearchNewWork></SearchNewWork>
                    </el-tab-pane>
                    <el-tab-pane name="work_likes_nums" label="点赞最多">
                        <SearchHotWork></SearchHotWork>
                    </el-tab-pane>
                </el-tabs>

            </div>
        </main>


        </div>
</template>

<script>
    import SearchNewWork from "./SearchNewWork";
    import SearchHotWork from "./SearchHotWork";
    export default {
        data(){
            return{
                searchText:this.$route.query.searchText,
                tab: 'work_date',

            }
        },
        methods:{
            getSearchText(){
                this.searchText = this.$route.query.searchText;
            }
        },
        watch:{
            '$route' (to, from){
                this.getSearchText();
            }
        },
        components:{
            SearchNewWork,SearchHotWork
        },
        created() {
            this.getSearchText();
        }

    }

</script>

<style scoped>

    .search-page__main {
        margin-top: 30px;
        margin-left: 12%;
        width: 1200px;
    }
    .search-title {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .search__word {
        color: #adb3fb;
        font-weight: 700;
    }

    /deep/ .el-tabs__active-bar{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background-color: #409EFF;
        z-index: 1;
        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
        list-style: none;
    }
    /deep/ .el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0 0;
    }

    /deep/ .el-tabs__nav-wrap {
        display: flex;
        overflow: hidden;
        margin-bottom: -1px;
        position: relative;
        justify-content: center;
    }

    /deep/ .el-tabs__item {
        padding: 0 48px;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        display: inline-block;
        list-style: none;
        font-size: 14px;
        font-weight: 500;
        color: #27282e;
        position: relative;
    }

    /deep/ .el-tabs__content {
        overflow: hidden;
        position: relative;
    }

</style>
